<template>
  <div>
    <Form inline :label-colon="true" class="search-form" :label-width="80">
      <FormItem label="账号">
        <Input v-model="searchForm.userAccount" placeholder="请输入账号/身份证号"/>
      </FormItem>
      <FormItem label="姓名">
        <Input v-model="searchForm.userName" placeholder="请输入姓名"/>
      </FormItem>
      <FormItem label="手机号码">
        <Input v-model="searchForm.phone" placeholder="请输入手机号码"/>
      </FormItem>
      <FormItem label="所属部门">
        <Input v-model="searchForm.deptNames" placeholder="请输入所属部门"/>
      </FormItem>
      <FormItem :label-width="0">

        <Button
          type="primary"
          @click="queryCategoryList"
          v-auth="'列表'"
          style="margin-right: 10px"
        >搜索
        </Button>

      </FormItem>
    </Form>
    <template>
      <Row>
        <i-col span='10' class="left-box">
<!--          <Tree :data="treeData" :load-data="loadData" :render="renderContent"></Tree>-->
          <Tree :data="treeData"></Tree>
        </i-col>
        <i-col span='14'>24</i-col>
      </Row>
    </template>
    <Drawer
      :title="viewParams.title"
      v-model="viewParams.flag"
      :width="35"
      draggable
      @on-visible-change="publicVisibleChange"
    >
      <MsgInsideForm
        v-if="viewParams.flag"
        :type="1"
        :moduleId="id"
        :receiveUser="receiveUser"
        @closeView="publicCloseView"
      />
    </Drawer>
  </div>
</template>

<script>
import API_KEY from '../../../api'
import { getListSelectOrgDeptUser, listSelectDeptUser, listSelectUser } from '../../../api/modules/user/user'
import { tableMixin } from '../../../mixin'

export default {
  name: 'AddressBook',
  mixins: [tableMixin],
  data () {
    return {
      searchForm: {
        userAccount: '',
        userName: '',
        phone: '',
        deptNames: '',
        roleNames: ''
      },
      receiveUser: '',
      tableData: [],
      treeData: [],
      suffix: '站内消息',
      idName: 'id',
      id: '',
      menuCode: 'account-addressBook',
      action: {
        listSelectOrgDeptUser: API_KEY.user.listSelectOrgDeptUser,
        readDeptByPage: API_KEY.user.readUserByPage
      }
    }
  },
  created () {
    this.queryCategoryList()
  },
  methods: {
    // 页面加载后 查询parentID=0 的分类
    queryCategoryList () {
      const than = this
      getListSelectOrgDeptUser(this.searchForm).then((res) => {
        // 这里给节点赋值
        than.treeData = this.getTreeOrg(res.data)
      })
    },
    loadData (item, callback) {
      let data = []
      const params = { ...this.searchForm }
      if (item.type === 'org') {
        params.orgId = item.id
        listSelectDeptUser(params).then(res => {
          data = this.getTreeDept(item, res.data)
          callback(data)
        })
      }
      if (item.type === 'dept') {
        params.deptId = item.id
        listSelectUser(params).then((res) => {
          data = this.getTreeUser(item, res.data)
          callback(data)
        })
      }
    },
    getTreeOrg (tree = []) {
      const arr = []
      if (tree.length !== 0) {
        tree.forEach(orgItem => {
          const org = {}
          org.title = orgItem.orgName
          org.id = orgItem.orgId // 其他你想要添加的属性
          org.parentId = orgItem.parentId // 其他你想要添加的属性
          org.children = []
          org.type = 'org'
          org.expand = true
          org.loading = false
          this.getTreeDept(org, orgItem.deptUserList)
          arr.push(org)
        })
      }
      return arr
    },
    getTreeDept (org, deptList) {
      const arr = []
      if (deptList != null && org.expand) {
        deptList.forEach(deptItem => {
          const dept = {}
          dept.id = deptItem.deptId
          dept.title = deptItem.deptName
          dept.children = []
          dept.type = 'dept'
          dept.parentId = org.orgId
          dept.loading = false
          dept.expand = true
          this.getTreeUser(dept, deptItem.userList)
          arr.push(dept)
        })
      }
      org.children = arr
      return arr
    },
    getTreeUser (dept, userList) {
      const arr = []
      if (userList != null && dept.expand) {
        userList.forEach(userItem => {
          const user = {}
          user.id = userItem.id
          user.type = 'user'
          user.title = userItem.userName
          user.userAccount = userItem.userAccount
          user.phone = userItem.phone
          user.email = userItem.email
          user.parentId = dept.deptId
          arr.push(user)
        })
      }
      dept.children = arr
      return arr
    },
    renderContent (h, { root, node, data }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%'
        }
      }, [
        h('span', [
          h('Icon'),
          h('span',
            {
              style: {
                marginLeft: '8px',
                display: 'inline-block',
                width: '150px'
              }
            },
            data.title)
        ]),
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
            marginRight: '32px'
          }
        }, [
          h('span', {
            style: {
              display: 'inline-block',
              'text-align': 'center',
              width: '120px',
              marginRight: '40px'
            }
          }, data.userAccount),
          h('span', {
            style: {
              display: 'inline-block',
              'text-align': 'center',
              width: '120px',
              marginRight: '40px'
            }
          }, data.phone),
          h('span', {
            style: {
              display: 'inline-block',
              width: '200px',
              marginRight: '40px'
            }
          }, data.email || ''),
          h('Button', {
            props: Object.assign({}, {
              type: 'primary',
              size: 'small'
            }),
            style: {
              marginRight: '8px',
              display: data.type === 'user' ? 'inline-block' : 'none'
            },
            on: {
              click: () => {
                this.receiveUser = data.userAccount
                this.publicUpdateData()
              }
            }
          }, '发送消息')
        ])
      ])
    }
  },
  components: {
    MsgInsideForm: () => import('@/views/person/MsgInsideForm')
  }
}
</script>

<style scoped="scoped" lang="scss">
.left-box {
  border: 1px solid red;
}
</style>
